/*
 * @Author: your name
 * @Date: 2021-12-09 18:56:11
 * @LastEditTime: 2021-12-09 21:00:18
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Vue\12.9zy\webpack.config.js
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackBar=require('webpackbar');
const Mock=require('mockjs');
const data=Mock.mock({
    "list|10":[{
        name:'@cname',
        id:'@id',
        img:'@image(150x150,@color)'
    }]
})
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].[hash].bundle.js",
    clean:true
  },
  plugins: [
      new HtmlWebpackPlugin({
        template:'./src/index.html'
      }),
      new MiniCssExtractPlugin(),
      new WebpackBar()
    ],
    module: {
        rules: [
          {
            test: /\.(sass|less|css|scss)$/i,
            use: [
              // 将 JS 字符串生成为 style 节点
              MiniCssExtractPlugin.loader,
              // 将 CSS 转化成 CommonJS 模块
              'css-loader',
              // 将 Sass 编译成 CSS
              'sass-loader',
            ],
          },
          {
            test: /\.(png|jpg|gif)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 30*1024,
                }
              },
            ],
           type: 'javascript/auto'
          },
          {
            test: /\.(eot|svg|ttf|woff|woff2)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {}
              },
            ],
          },
        ],
      },
      devServer:{
          host:"localhost",
          port:8090,
          open:true,
          hot:true,
          before(app){
              app.get('/list',(req,res)=>{
                  res.send(data.list)
              })
              app.post('/login',(req,res)=>{
                  res.send({
                      code:200,
                      msg:'登录成功'
                  })
              })
          }
          
      },
      resolve: {
        alias: {
          img: path.resolve(__dirname, 'src/assets/img/'),
          iconfont: path.resolve(__dirname, 'src/assets/iconfont/'),
          "@":path.join(__dirname,'./src/')
        },
        extensions: ['.js', '.json', '.wasm','jpg'],
      },
      devtool:"source-map"
};